<template>
  <n-drawer class="exchange-info" v-model:show="exchangeInfoDrawerActive" width="63%" >
    <n-drawer-content body-style="--n-body-padding:0" closable>
      <template #header>
        <div class="my-title--primary">兑换订单(详情)</div>
      </template>
      <div class="i-card">
        <div class="i-card_top">
          <div class="i-card_top-icon"></div>
          <div class="i-card_top-name">
            <span>西门起</span>
            <span>13343452345</span>
          </div>
        </div>
        <div class="i-card_bottom">
          <span>会员类型: 至尊会员</span>
          <span>本店会员：是</span>
        </div>
      </div>
      <div class="i-content">
        <div class="i-content_item">
          <div class="i-content_item-left">
            订单编号：xsDD-3213123123
          </div>
          <div class="i-content_item-right">
            订单类型：兑换订单
          </div>
        </div>
        <div class="i-content_item">
          <div class="i-content_item-left">
            订单积分：5
          </div>
          <div class="i-content_item-right">
            兑换积分：5
          </div>
        </div>
        <div class="i-content_item">
          <div class="i-content_item-left">
            下单时间：2022-02-23 09:51:18
          </div>
          <div class="i-content_item-right">
            操作人：小米
          </div>
        </div>
      </div>
      <div class="i-total">
        <div class="i-total_container">
          <div class="i-total_container-quantity">
            合计数量：
            <span>6件</span>
          </div>
          <div class="i-total_container-line"></div>
          <div class="i-total_container-integral">
            合计积分：
            <span>0</span>
          </div>
        </div>
      </div>
      <div class="i-log">
        <div class="i-log_row i-log_header ">
          <div class="i-log_row-col">商品</div>
          <div class="i-log_row-col">规格</div>
          <div class="i-log_row-col">数量</div>
          <div class="i-log_row-col">商品积分</div>
        </div>
        <div class="i-log_row">
          <div class="i-log_row-col">B1-4042带腿打算</div>
          <div class="i-log_row-col">肤色70A</div>
          <div class="i-log_row-col">1</div>
          <div class="i-log_row-col">5</div>
        </div>
      </div>
      <template #footer>
        <div class="i-footer">
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
  import { inject } from "vue";

  const exchangeInfoDrawerActive = inject('exchangeInfoDrawerActive')
</script>

<style lang="less" scoped>
  .exchange-info {
    .i-card {
      width: 1110px;
      height: 110px;
      padding: 20px;
      margin: 20px 0 20px 20px;
      background: #d6dae7;

      &_top {
        display: flex;
        align-items: center;

        &-icon {
          width: 48px;
          height: 48px;
          margin-right: 10px;
          background: #FFF;
        }

        &-name {
          font-size: 30px;
          font-weight: bold;
          color: #2E323D;

          >span {
            &:nth-child(1) {
              margin-right: 10px;
            }
          }
        }
      }

      &_bottom {
        margin: 20px 0 0 58px;
        font-size: 24px;
        font-weight: 500;
        color: #4A5060;

        >span {
          &:nth-child(1) {
            margin-right: 380px;
          }
        }
      }
    }

    .i-content {
      margin: 20px 40px 20px 20px;

      &_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1000px;
        margin: 10px 0;
        font-size: 24px;
        font-weight: 500;
        color: #4A5060;

        &-left {
          flex: 2;
        }

        &-right {
          flex: 1;
        }
      }
    }

    .i-total {
      display: flex;
      justify-content: flex-end;
      margin:20px 40px 20px 0;
      
      &_container {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 604px;
        height: 60px;
        font-size: 24px;
        font-weight: bold;
        color: #666;
        background: #F7F7F7;
        border-radius: 5px;

        &-quantity,
        &-integral {
          width: 200px;
          text-align: center;
          > span {
            color: #666;
          }
        }
        &-line {
          width: 1px;
          height: 30px;
          background: #D8D8D8;
        }
      }
    }
    .i-log {
      margin-left: 20px;

      &_row {
        display: flex;
        align-items: center;
        width: 1110px;
        height: 74px;
        padding: 0 20px;
        font-size: 24px;
        font-weight: 500;
        color: #4A5060;
        border: 1px solid #e0e0e0;

        &-col {
          flex: 1;
        }
      }

      &_header {
        background: #F7F7F7;
      }
    }

    .i-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>